<template>
  <div class="saveUpdate">
    <el-dialog :close-on-click-modal="false" :title="getTitle" :visible.sync="showDialog"
               @close="$emit('update:showServiceIframe', false)"
               :showServiceIframe="showServiceIframe" width="800px"
    >

      <dialog-wrapper :MaxWidth="800" v-loading="loading" element-loading-text="加载数据"
                      element-loading-spinner="el-icon-loading">
        <el-row style="padding: 10px">
          <el-col :span="5">名称</el-col>
          <el-col :span="14">内容</el-col>
          <el-col :span="5">时间</el-col>
        </el-row>
        <el-row v-for="(item,index) in result.list" :key="index"
                style="padding: 10px; border-bottom:1px dashed #000;">
          <el-col :span="5"><span v-html="getNickname(item)"></span></el-col>
          <el-col :span="14">
            <span v-if="item.msg_type==1"><img-url :item="item"></img-url></span>
            <span v-else v-html="getInfo(item)"></span></el-col>
          <el-col :span="5"><span v-text="item.created_at"></span></el-col>
        </el-row>
      </dialog-wrapper>
      <div slot="footer" class="dialog-footer">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ImgUrl from './ImgUrl'
  import DialogWrapper from '@/components/DialogWrapper'
  import {getIMInfoByTopicId, getImInfoByLastInfoId} from '@/api'

  export default {
    components: {DialogWrapper,ImgUrl},
    data() {
      return {
        showDialog: this.showServiceIframe,
        loading: false,
        result: {},
        sourceId: 0,
        lastInfoId: 0,
        oldHight:0,
        scrollHeight:0
      }
    },
    props: {
      showServiceIframe: {
        type: Boolean,
        default: false
      },
      topicId: {
        type: Number
      }
    },
    updated() {

      let dom = document.querySelector('.el-dialog__body')
      if(dom.scrollHeight!=this.scrollHeight)
      {
        dom.scrollTop = dom.scrollHeight - this.scrollHeight
        this.scrollHeight=dom.scrollHeight
        // this.oldHight = dom.scrollTop
      }
    },
    created() {
      this.getIMInfoByTopciId(this.topicId)
    },
    computed: {
      getTitle() {
        let str = ''

        if (this.result.agency) {
          str = this.result.agency.nickname + '(代理） 与 ' + this.result.player.nickname + '(用户) 的对话'
        }
        return str
      }
    }
    ,
    methods: {
      getIMInfoByTopciId(id) {
        let self=this
        getIMInfoByTopicId(id).then(res => {
          if (res.status === 0) {
            self.result.changeList = []
            self.result = res.data
            self.sourceId = res.data.agency.id
            self.result.list = res.data.list.sort(self.compare('id'))
            self.lastInfoId = self.result.list[0].id
            let dom = document.querySelector('.el-dialog__body')
            // console.log(dom.scrollHeight)
            dom.addEventListener("scroll", () => {
              // const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
              // console.log(dom.scrollHeight)

              if (dom.scrollTop == 0&&!this.loading) {//等于0证明已经到底，可以请求接口
                  self.loading=true
                self.getMoreImInfo(self.lastInfoId)
              }
            })
          }
        })
      },
      compare(property) {
        return function (obj1, obj2) {
          var value1 = obj1[property];
          var value2 = obj2[property];
          return value1 - value2;     // 升序
        }
      },
      getMoreImInfo() {
        this.loading = true
        if(this.lastInfoId)
        {
        getImInfoByLastInfoId(this.topicId, {last_msg_id: this.lastInfoId}).then(res => {
          if (res.status === 0) {
            if (res.data.list) {
              res.data.list.forEach(item => {
                this.result.list.push(item)
              })
              this.result.list.sort(this.compare('id'))
              this.lastInfoId = this.result.list[0].id;

              this.loading = false
            } else {
              delete this.lastInfoId
              this.loading = false
            }
          }
        })}else{
          this.loading=false
        }
      },
      getNickname(item) {
        let htmlCode = ''
        if (this.sourceId == item.source_id) {
          htmlCode = '<span style="color: red">' + this.result.agency.nickname + ':</span>'
        } else {
          htmlCode = this.result.player.nickname + ":"
        }
        return htmlCode
      },
       // 兼容发送的图片地址
      compatibleImgUrl(url) {
        let lastUrl = url;
        // 最老的情况
        if(/img\[(.+)\]/g.test(url)){
          lastUrl = /img\[(.+)\]/g.exec(url)[1]
        }else{
          lastUrl = /(http:\/\/|https:\/\/)/.test(url)? url : 'http://im.beierche.net/' + url
        }
        return lastUrl
      },
      getInfo(item) {

        switch (item.msg_type) {
          case 0: {
            return '<span>' + item.info + '</span><el-divider></el-divider>'
          }
          case 10: {
            let obj = JSON.parse(item.info)
            if (obj.type === 'pay:get_pay_type_detail') {
              return '<span>收款账号ID：' + obj.data.receiptAddressId + '</span><br />' +
                '<span>支付类型：' + this.$store.state.app.payType[obj.data.payType] + '</span><br />' +
                '<span>支付h5图片：</span><a style="color: blue" href="' + obj.data.payUrl + '  " target="view_window">查看支付图片</a><el-divider/>'
            } else if (obj.type === 'pay:select_pay_type') {
              return '<span>选择支付类型：' + this.$store.state.app.payType[obj.data.payType] + '</span><br />'
            } else if (obj.type === 'pay:select_pay_amount') {
              return '<span>收款账号ID：' + obj.data.receiptAddressId + '</span><br />' +
                '<span>支付类型：' + this.$store.state.app.payType[obj.data.payType] + '</span><br />' +
                '<span>充值金额：' + parseFloat(obj.data.amount) / 100 + '元</span><br />'
            } else if (obj.type === 'pay:get_pay_type_amount_levels') {
              return `<span>收款账号ID：${obj.data.receiptAddressId}</span><br />
              <span>支付类型：${this.$store.state.app.payType[obj.data.payType]}</span><br />
              <span>可选金额项：${obj.data.quotas}</span><br />
              <span>是否支持手动输入：${obj.data.amountAllowCustom ? '可以' : '不可以'}</span><br />
                <span>最小充值金额：${parseFloat(obj.data.amountMin) / 100}元</span><br />
                <span>最大充值金额：${parseFloat(obj.data.amountMax) / 100}元</span><br />`
            } else if (obj.type === 'get_pay_order_detail') {
              return '<span>订单ID：' + obj.data.orderId + '</span><br />' +
                '<span>支付类型：' + this.$store.state.app.payType[obj.data.payType] + '</span><br />' +
                '<span>支付h5图片：</span><a style="color: blue" href="' + obj.data.payUrl + '  " target="view_window">查看支付图片</a><el-divider></el-divider>'
            }


          }
        }

      },
      createMethod() {

      }
    },
    watch: {
      showServiceIframe() {
        this.showDialog = this.showServiceIframe
      },
      'result.list'(val) {
        if (val.length > 0) {
          let dom = document.querySelector('.el-dialog__body')
          console.log(dom.scrollHeight)
        }
      }
    }
  }
</script>


<style scoped>
  .pickerStyle {
    width: 280px !important;
  }

  .agency {
    color: red !important;
  }

</style>
